<template>
	<view class="new-users copy-data">
		<image class="bg" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon9.png" mode=""></image>
		<view style="flex:1;overflow: hidden;">
			<scroll-view scroll-y="true">
				<view class="head">
					<!-- 头部用户信息 -->
					<view class="top">
						<view class="left flex">
							<image class="userAvatar" :src="userInfo.avatar?userInfo.avatar:'../../static/images/userAvatar.png'" mode="">
							</image>
							<view v-if="userInfo.nickname">
								<view class="flex">
									<text class="text mr32">{{userInfo.nickname}}</text>
									<text class="vip"v-if="userInfo.platformLevelDo && userInfo.platformLevelDo.levelName">{{userInfo.platformLevelDo.levelName}}</text>
								</view>
								<view class="flex" style="margin-top: 14rpx;">
									<view class="flex phoneBox" v-if="userInfo.phone"> 
										<image class="phoneIcon" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/qudaoguanli/jiaruwomen_icon2.png" mode=""></image>
										<view class="text">{{userInfo.phone.substr(0,3) + "****" + userInfo.phone.substr(7)}}</view>
									</view>
									<text class="ID" v-if="userInfo.uid!='1001'">ID:{{userInfo.uid}}</text>
								</view>
							</view>
							<view class="mr32" v-else @tap="openAuto">请您先登录</view>
						</view>
						<view v-if="userInfo.nickname" class="right" @click="goNav('/pages/users/user_info/index')">
							<image class="qrcode" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon10.png" mode=""></image>
							<view class="text">编辑</view>
						</view>
					</view>
					<!-- 商铺管理卡片 -->
					<view class="cardBox">
						<view class="card">
							<image src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon2.png" mode=""></image>
							<view class="flex-between pore item">
								<view class="">
									<view class="title">商铺管理</view>
									<view class="tip">店铺运营状况及时掌握</view>
								</view>
								<button class="btn" @click="goMenuPage()">{{userInfo.openMerchantAssociation?'去查看':'去开通'}}</button>
							</view>
						</view>
					</view>
					<!-- 数据统计 -->
					<view class="dataBox">
						<view class="item flex-between">
							<view class="text">
								<image src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon8.png" mode=""></image>
								可提现佣金：<text class="price">{{userInfo.commission || 0}}</text>元
							</view>
							<button class="btn flex-all-center" @click="goNav('/pages/users/user_ithdrawal_money/index')">立即使用</button>
						</view>
						<view class="topMoney">
							<p class="money" @click="goMyBalance">{{promotionInfo.todaySEarnings|| 0}}</p>
							<p class="money" @click="goProfit">{{promotionInfo.cumulativeIncome|| 0}}</p>
							<p class="money" @click="goMyTeam">{{promotionInfo.promotionHeadCount || 0}}</p>
							<p class="moneyTitle">今日收益(元)</p>
							<p class="moneyTitle">累计收益(元)</p>
							<p class="moneyTitle">累计推广人数</p>
						</view>
					</view>
					<!-- 轮播图 -->
					<u-swiper height="89"  bottom :list="swiperImages" indicator indicatorMode="line" circular
						indicatorActiveColor="#2393FF" indicatorInactiveColor="#FFFFFF"></u-swiper>
					
					<!-- 我的服务 -->
					<view class="order-wrapper">
						<view class="title flex">
							<view class="lineText"></view>我的服务
						</view>
						<view class="order-bd">
							<block v-for="(item,index) in functionMenu" :key="index">
								<view class="order-item" 
									@click="goNav(item.url)">
									<view class="pic">
										<image :style="{width: index==3?'94rpx':'90rpx',height: index==3?'59rpx':'58rpx'}" :src="item.img" mode=""></image>
									</view>
									<view class="txt">{{item.title}}</view>
								</view>
							</block>
						</view>
					</view>
					<!-- 平台服务 -->
					<view class="order-wrapper">
						<view class="title flex">
							<view class="lineText"></view>平台服务
						</view>
						<view class="order-bd">
							<navigator class="order-item" hover-class="none" url="">
								<view class="pic">
									<image style="width: 48rpx;height: 45rpx;" src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon3.png" mode=""></image>
								</view>
								<view class="txt">投诉建议</view>
							</navigator>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="show" :closeOnClickOverlay="false" mode="center" :round="10" @close="show = false">
			<view style="padding: 40rpx;width: 686rpx;">
				<view class="" style="text-align: center;font-size: 32rpx;margin-bottom: 40rpx;">添加代理商</view>
				<view class="information">
					<view class="informationForm">
						<p class="leftTitle">代理商名称</p>
						<input v-model="agentInfo.agentNickName" class="rightInput" type="text" placeholder="请输入代理商名称" />
					</view>
					<view style="height: 1rpx;background-color:#DDDDDD;"></view>
					<view class="informationForm">
						<p class="leftTitle">代理商密码</p>
						<input v-model="agentInfo.pwd" password class="rightInput" type="safe-password"
							placeholder="请输入密码" />
					</view>
					<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				</view>
				
				<view class="information" >
					<view class="informationForm">
						<p class="leftTitle">所在地区</p>
						<picker class="rightInput picker" mode="multiSelector" :range="multiArray"
							@change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex">
							<view class="ellipsis">{{ fullAddress || '请选择所在地区' }}</view>
						</picker>
					</view>
					<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				</view>
				<button class="submitbtn" @click="submit">提交</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		getUserInfo,
		getInfo,
		getMinimumLevel,
		getIncomeStatistics,
		getBanner
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		getProvincial,
		getCity,
		getDistrict,
		addAddress
	} from '@/api/address.js';
	import {
		isGenerateAgent,
		createAgentInformation
	} from '@/api/order.js';
	// const app = getApp();
	export default {
		data() {
			return {
				show: false,
				agentInfo:{},
				multiArray: [
					[],
					[],
					[]
				],
				multiIndex: [0, 0, 0],
				fullAddress: '',
				fullAddressIds: ['', '', ''],
				provinceMap: {},
				cityMap: {},
				countyMap: {},
				swiperImages: [
					'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/uniappImg/classBanner.png',
					'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/uniappImg/classBanner.png'
				],
				orderMenu: [{
						img: '/static/myImages/order1.png',
						title: '全部',
						url: '/pages/users/order_list/index?status=null',
					},
					{
						img: '/static/myImages/order3.png',
						title: '待发货',
						url: '/pages/users/order_list/index?status=2',
					},
					{
						img: '/static/myImages/order4.png',
						title: '待收货',
						url: '/pages/users/order_list/index?status=4',
					},
					{
						img: '/static/myImages/order5.png',
						title: '已完成',
						url: '/pages/users/order_list/index?status=8',
					},
				],
				functionMenu: [{
						img: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon7.png',
						title: '佣金明细',
						url: '/pages/users/user_spread_money/index',
					}, {
						img: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon6.png',
						title: '全部订单',
						url: '/pages/users/order_list/index?status=null',
					}, {
						img: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon5.png',
						title: '余额管理',
						url: '/pages/users/user_money/index',
					},{
						img: 'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/my_icon4.png',
						title: '推广素材',
						url: '/pages/platform/articleList/index?flag=1',
						// url: '/pages/user_spread_code/index',
					}, 
					// {
					// 	img: '/static/myImages/function4.png',
					// 	title: '余额转增',
					// 	url: '/pages/users/balanceGive/index',
					// }, {
					// 	img: '/static/myImages/function5.png',
					// 	title: '我的团队',
					// 	url: '/pages/users/promoter-list/index',
					// },
					// {
					// 	img: '/static/myImages/function8.png',
					// 	title: '推广海报',
					// 	url: '/pages/user_spread_code/index',
					// }, 
					// {
					// 	img: '/static/myImages/function9.png',
					// 	title: '修改资料',
					// 	url: '/pages/users/user_info/index',
					// }, {
					// 	img: '/static/myImages/function10.png',
					// 	title: '联系客服',
					// },
					// {
					// 	img: '/static/myImages/function0.png',
					// 	title: '收货地址',
					// 	url: '/pages/address/index',
					// },
				],
				servicePic: '/static/images/customer.png',
				userInfo: {phone:'***********'},
				promotionInfo:{},
				levelList: [],
				hasLogin:false
			}
		},
		onLoad() {
			this.getAllImage()
		},
		onShow: function() {
			if(uni.getStorageSync("LOGIN_STATUS_TOKEN")){
				this.getUserList()
			}else{
				this.userInfo = {}
				this.hasLogin = false
			}
			
		},
		methods: {
			goNav(url) {
				if(this.hasLogin){
					uni.navigateTo({
						url
					})
				}else{
					this.openAuto()
				}
				
			},
			//获取会员等级
			getVipLevel() {
				getMinimumLevel().then(res => {
					this.levelList = res.data
					// console.log(res, "获取等级")
				})
			},
			//获取用户信息
			getUserList() {
				getUserInfo().then(res => {
					if (res.data) {
						this.userInfo = res.data
						this.hasLogin = true
						this.isSetAgentInfo()
						this.loadProvinces();
						this.getVipLevel()
						getInfo().then(res => {
							this.userInfo.commission = res.data.commission
						})
						getIncomeStatistics(this.userInfo.uid).then(res => {
							this.promotionInfo = res.data
						})
					} else {
						this.hasLogin = false
						this.openAuto()
					}
				})
			},
			//跳转登录
			openAuto() {
				uni.navigateTo({
					url: '/pages/users/wechat_login/index'
				})
			},
			//头部
			goMenuPage() {
				if(this.hasLogin){
					if(this.userInfo.openMerchantAssociation){//是商家
						uni.navigateTo({
							url:"/pages/users/storeManage/storeManage"
						})
					}else{//不是商家
						uni.switchTab({
							url:"/pages/goods_cate/goods_cate"
						})
					}
					
				}else{
					this.openAuto()
				}
				
			},
			// 获取轮播图
			getAllImage(){
				getBanner({typeName:'个人中心轮播图'}).then(res=>{
					this.swiperImages =res.data.records.map(item=>item.cover)
				})
			},
			// 跳转到佣金提现页面
			goUse(){
				uni.navigateTo({
					url:""
				})
			},
			// 是否生成代理商
			isSetAgentInfo() {
				isGenerateAgent().then(res => {
					if (res.data) {
						this.show = true;
					}
				})
			},
			loadProvinces() {
				const params = {
					pageSize: 99,
					pageNumber: 1
				};
				getProvincial(params).then(res => {
					this.multiArray[0] = res.data.records.map(item => item.name);
					this.provinceMap = res.data.records.reduce((map, item) => ({
						...map,
						[item.name]: item.id
					}), {});
			
					// 自动加载第一个省份的城市数据
					if (this.multiArray[0].length > 0) {
						this.loadCities(0);
					}
				}).catch(error => {
					console.error('Failed to load provinces:', error);
				});
			},
			loadCities(provinceIndex) {
				const provinceName = this.multiArray[0][provinceIndex];
				const provinceId = this.provinceMap[provinceName];
				const params = {
					atProvincialLevelId: provinceId,
					pageSize: 99,
					pageNumber: 1
				};
				getCity(params).then(res => {
					this.multiArray[1] = res.data.records.map(item => item.name);
					this.cityMap = res.data.records.reduce((map, item) => ({
						...map,
						[item.name]: item.id
					}), {});
			
					// 自动加载第一个城市区县数据
					if (this.multiArray[1].length > 0) {
						this.loadCounties(0);
					}
			
					this.multiArray[2] = [];
					this.multiIndex = [provinceIndex, 0, 0];
				}).catch(error => {
					console.error('Failed to load cities:', error);
				});
			},
			loadCounties(cityIndex) {
				const cityName = this.multiArray[1][cityIndex];
				const cityId = this.cityMap[cityName];
				const provinceName = this.multiArray[0][this.multiIndex[0]];
				const provinceId = this.provinceMap[provinceName];
				const params = {
					// atProvincialLevelId: provinceId,
					cityId: cityId,
					pageSize: 99,
					pageNumber: 1
				};
				getDistrict(params).then(res => {
					this.multiArray[2] = res.data.records.map(item => item.name);
					this.countyMap = res.data.records.reduce((map, item) => ({
						...map,
						[item.name]: item.id
					}), {});
			
					this.multiIndex = [this.multiIndex[0], cityIndex, 0];
				}).catch(error => {
					console.error('Failed to load counties:', error);
				});
			},
			bindMultiPickerColumnChange(e) {
				const col = e.detail.column;
				const value = e.detail.value;
				if (col === 0) {
					this.loadCities(value);
				} else if (col === 1) {
					this.loadCounties(value);
				}
			},
			bindMultiPickerChange(e) {
				const index = e.detail.value;
				const provinceName = this.multiArray[0][index[0]];
				const cityName = this.multiArray[1][index[1]];
				const districtName = this.multiArray[2][index[2]];
				const provinceId = this.provinceMap[provinceName];
				const cityId = this.cityMap[cityName];
				const districtId = this.countyMap[districtName];
			
				// 更新 agentInfo 中的字段
				this.agentInfo.addressId = provinceId;
				this.agentInfo.address = provinceName;
				this.agentInfo.shiId = cityId;
				this.agentInfo.shi = cityName;
				this.agentInfo.quXianId = districtId;
				this.agentInfo.quXian = districtName;
				this.fullAddress = `${provinceName}-${cityName}-${districtName}`;
				this.fullAddressIds = [provinceId, cityId, districtId];
			},
			submit(){
				if(!this.agentInfo.agentNickName || !this.agentInfo.pwd|| !this.agentInfo.addressId){
					uni.showToast({
						title:"请填写所有信息",
						icon:'none'
					})
					return
				}
				createAgentInformation(this.agentInfo).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:"提交成功",
							icon:'none'
						})
						this.show = false
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		background: #F7F7F7;
	}

	.topMoney {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-align: center;
		padding-top: 16rpx;
		.money {
			width: 33%;
			// height: 60rpx;
			;
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			overflow: hidden;
			/* 隐藏溢出的内容 */
			white-space: nowrap;
			/* 防止文本换行 */
			text-overflow: ellipsis;
			/* 用省略号表示被隐藏的文本 */
		}

		.moneyTitle {
			width: 33%;
			// height: 60rpx;
			font-size: 24rpx;
			color: #28314C;
		}
	}

	.taskDescription {
		padding: 20rpx;
		color: #955F25;
	}

	.container {
		position: relative;

		.vipBigImage {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}

		.ruleButton {
			width: 148rpx;
			height: 48rpx;
			position: absolute;
			top: 50rpx;
			right: 30rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 20rpx;
			color: #A0CBE9;
			background-color: #79777b;
			border-radius: 30rpx;
		}
	}



	.businessBanner {
		width: 690rpx;
		height: 190rpx;
		margin-top: 20rpx;
	}



	.icon {
		width: 26rpx;
		height: 26rpx;
		height: auto;
		margin-right: 20rpx;
	}



	.scrollable-content {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		border: 2rpx solid #1D85E1;
		border-radius: 20rpx;
		padding: 20rpx;
	}



	.new-users {
		position: relative;
		padding-bottom: 40rpx;
		//margin-top: var(--status-bar-height);
		// display: flex;
		// flex-direction: column;
		// height: 100%;
		// background: linear-gradient(to bottom, #DCE5FF, #F7F8FB);

		.head {
			padding: 234rpx 32rpx 0;
			.user-card {
				position: relative;
				width: 100%;
				margin: 0 auto;
				padding: 0 0 30rpx 0rpx;

				.user-info {
					display: flex;

					.avatar {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;
						padding: 15rpx 0;

						.name {
							display: flex;
							align-items: center;
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: 700;
							font-size: 32rpx;
							color: #FFFFFF;
							
							.vip {
								display: flex;
								align-items: center;
								padding: 6rpx 20rpx;
								background: rgba(0, 0, 0, 0.2);
								border-radius: 18px;
								font-size: 20rpx;
								margin-left: 12rpx;

								image {
									width: 27rpx;
									height: 27rpx;
								}
							}
						}

						.num {
							display: flex;
							align-items: center;
							font-size: 26rpx;
							color: rgba(255, 255, 255, 0.6);



							image {
								width: 22rpx;
								height: 23rpx;
								margin-left: 20rpx;
							}
						}
					}
				}


			}

			.order-wrapper {
				background-color: #fff;
				border-radius: 14rpx;
				margin-top: 24rpx;
				padding: 24rpx 24rpx 37rpx 24rpx;
				z-index: 4;
				.title {
					font-weight: 700;
					font-size: 32rpx;
					color: #28314C;
					margin-bottom: 20rpx;
					font-family: "Alibaba PuHuiTi 2.0-85 Bold"
				}
				
				.lineText {
					width: 8rpx;
					height: 34rpx;
					background: #2393FF;
					border-radius: 4px 4px 4px 4px;
					margin-right: 12rpx;
				}
				.order-hd {
					justify-content: space-between;
					font-size: 30rpx;
					color: #282828;
					padding: 0 16rpx;

					.left {
						font-weight: 600;
						font-size: 28rpx;
						color: #000;
						line-height: 34rpx;
						text-align: left;
						margin-left: 10rpx;
					}

					.right {
						font-weight: 400;
						font-size: 20rpx;
						color: #023681;
						line-height: 28rpx;
						text-align: left;

						.icon-xiangyou {
							margin-left: 5rpx;
							font-size: 24rpx;
						}
					}
				}

				.order-bd {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.order-item {
						// width: 160rpx;
						height: 140rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin: 0rpx 0rpx;

						.pic {
							position: relative;
							text-align: center;
							margin-top: 20rpx;

							image {
								// width: 48rpx;
								// height: 48rpx;
								width: 50rpx;
								height: 50rpx;
							}
						}

						.txt {
							margin-top: 12rpx;
							// font-size: 26rpx;
							// color: #454545;
							font-weight: 400;
							font-size: 26rpx;
							color: #11041A;
							line-height: 28rpx;
							text-align: left;
						}
					}
				}
			}
		}

		.order-status-num {
			min-width: 12rpx;
			background-color: #fff;
			color: #ee5a52;
			border-radius: 15px;
			position: absolute;
			right: -14rpx;
			top: -15rpx;
			font-size: 42rpx;
			padding: 0 8rpx;
			border: 1px solid #ee5a52;
		}
	}
	.bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 801rpx;
		height: 574rpx;
	}
	.top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 38rpx;
		.left {
			.userAvatar {
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}
			.phoneIcon {
				width: 23rpx;
				height: 28rpx;
				margin-right: 6rpx;
			}
	
			.phoneBox {
				.text {
					// ;
					font-weight: 700;
					font-size: 24rpx;
					color: rgba(255,255,255,0.66);
				}
			}
	
			.vip {
				border-radius: 4rpx 4rpx 20rpx 4rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #28314C;
				padding: 2rpx 20rpx;
				background: linear-gradient(91deg, #F2F2F4 0%, #CBCED4 100%);
			}
	
			.mr32 {
				margin-right: 24rpx;
				color: #FFFFFF;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 32rpx;
			}
			.ID{
				// ;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				background: rgba(255, 255, 255, 0.37);
				border-radius: 8rpx;
				padding: 2rpx 10rpx;
				margin-left: 12rpx;
			}
		}
	
		.right {
			display: flex;
			flex-direction: column;
			align-items: center;
	
			.qrcode {
				width: 33rpx;
				height: 33rpx;
				margin-bottom: 8rpx;
			}
	
			.text {
				font-family: PingFang SC Medium, PingFang SC Medium;
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: 400;
			}
		}
	}
	.cardBox{
		display: flex;
		align-items: center;
		justify-content: center;
		.item{
			margin: 64rpx 48rpx 0 152rpx;
		}
		.title{
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 700;
			font-size: 32rpx;
			color: #853E18;
		}
		.tip{
			font-size: 24rpx;
			color: #853E18;
			margin-top: 4rpx;
		}
		.btn{
			width: 130rpx;
			height: 52rpx;
			line-height: 52rpx;
			background: linear-gradient( 136deg, #FF975D 0%, #E55204 100%);
			box-shadow: inset 0px 2px 6px 0px rgba(255,255,255,0.1608);
			border-radius: 26rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	.card{
		position: relative;
		width: 638rpx;
		height: 158rpx;
		image{
			position: absolute;
			width: 638rpx;
			height: 158rpx;
		}
	}
	.pore{
		position: relative;
		z-index: 1;
	}
	.dataBox{
		background: #FFFFFF;
		box-shadow: 0px 6px 12px 0px rgba(204,204,204,0.1569);
		border-radius: 12rpx;
		padding: 24rpx;
		margin: -2rpx 0 24rpx 0;
		position: relative;
		z-index: 1;
		.item{
			padding-bottom: 24rpx;
			border-bottom: 2rpx solid #E5E5E5;
			image{
				width: 34rpx;
				height: 24rpx;
				margin-right: 16rpx;
			}
			.text{
				font-size: 24rpx;
				color: #28314C;
				.price{
					// ;
					font-weight: 700;
					font-size: 32rpx;
					color: #28314C;
					margin-right: 24rpx;
				}
			}
			.btn{
				width: 158rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 30rpx;
				border: 2rpx solid #2393FF;
				font-size: 24rpx;
				color: #2393FF;
			}
		}
	}
	.information {
		background: #FFFFFF;
		position: relative;
		margin: 0 20rpx;
		border-radius: 16rpx;
	
		.informationForm {
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
	
			.leftTitle {
				width: 30%;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				font-weight: 600;
				line-height: 80rpx;
				text-align: left;
				font-style: normal;
			}
			.leftTitle::before {
				content: "*";
				color: red;
				margin-right: 4rpx;
			}
	
			.rightInput {
				width: 70%;
				height: 80rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				line-height: 80rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
	
	.picker {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: left;
	}
	
	.bottomBox {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 1000;
		background-color: white; // 使用变量代替硬编码颜色
		display: flex;
	
		.button {
			width: 80%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #007aff;
			color: #FFFFFF;
			border-radius: 80rpx;
			margin: 20rpx auto;
		}
	}
	.submitbtn{
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		background: #0077FF;
		box-shadow: 0px 6px 12px 2px rgba(204,204,204,0.16);
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
	}
	.ellipsis{
		overflow: hidden;
		/* 隐藏溢出的内容 */
		white-space: nowrap;
		/* 防止文本换行 */
		text-overflow: ellipsis;
		/* 用省略号表示被隐藏的文本 */
	}
</style>